<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
/* @media (min-width: 576px){
.container {
    max-width: 540px;
}
} */
.container {
    width: 100%;
    background:skyblue;
    margin: 0 auto;
    /* padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto; */
}
.row>div{
    height:50px;
    background-color: #eee;
    border: 1px solid #999;
    box-sizing: border-box;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.col-md-4 {
    /* 设置flex行为*/
    /* flex: flex-grow, flex-shrink, flex-basis*/
    /* flex-grow: 项目的放大比例，默认为0，即如果存在剩余空间，也不放大*/
    /* flex-shrink: 项目的缩小比例，默认为1，如果空间不足，则该项目缩小，若为0，则不缩小.*/
    /* flex-basis: <length> | auto; 默认为auto，即项目本来大小，可设置长度*/
    flex: 0 0 33.333%;
}
.col-md-3{
    flex: 0 0 25%;
}
.col-md-2{
    
}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">120</div>
            <div class="col-md-4">120</div>
            <div class="col-md-4">120</div>
        </div>
        <div class="row">
            <!-- <div class="col-md-2">120</div>
            <div class="col-md-2">120</div>
            <div class="col-md-2">120</div> -->
            <div class="col-md-3">120</div>
            <div class="col-md-3">120</div>
            <div class="col-md-3">120</div>
            <div class="col-md-3">120</div>
        </div>
    </div>
</body>
</html>